<template>
<div class="head">
    <div class="nav-head">
        <li>您好，欢迎光临花果山！</li>
     <nav>
           <router-link class="nav-link1" :to="{name:'login-register'}">[请登录]</router-link> <span>|</span>
           <router-link class="nav-link1" :to="{name:'login-register'}">[新朋友注册]</router-link> <span>|</span>
           <router-link class="nav-link1" :to="{name: ''}">我的订单</router-link><span>|</span>
           <router-link class="nav-link1" :to="{name: ''}">帮助中心</router-link> <span>|</span>
           <router-link class="nav-link1" :to="{name: ''}">意见反馈</router-link> <span>|</span>
           <router-link class="nav-link1" :to="{name: ''}">我的个人中心</router-link>
     </nav>
    </div>
    <div id='nav-line'>
        <div id='logo-left'>
        <router-link  :to="{name: 'commodities'}"><img src="~@/assets/logo.jpg" alt="logo"></router-link>
        </div> <span>|</span>
        <div id='tip1'>¥59包邮</div>
        <div id='tip-line'></div>
        <div id='tip2'>多仓发货</div>
        <div id='right'>
            <div id="search">
                <input type="text" vluae='' name='qq'>
                 <input  type="button" name='search' value="搜索" onclick="search()">
            </div>
            <p>搜索：<a href="">奇异果</a><a href="">苹果</a><a href="">火龙果</a></p>

        </div>
    </div>
  <div id="nav-foot">
      <ul>
          <li><span>|</span><router-link class="nav-link" :to="{name: 'commodities'}">全部商品</router-link><span>|</span></li>
          <li><router-link class="nav-link" :to="{name: 'home'}">首页</router-link><span>|</span></li>
          <li><router-link class="nav-link" :to="{name: 'fresh'}">尝鲜装</router-link><span>|</span></li>
          <li><router-link class="nav-link" :to="{name: 'original'}">原箱装</router-link><span>|</span></li>
          <li><router-link class="nav-link" :to="{name: 'Epurchases'}">企业购买</router-link><span>|</span></li>
          <li><router-link class="nav-link" :to="{name: 'GiftKards'}">礼品卡</router-link><span>|</span></li>

      </ul>
  </div>
</div>
</template>

<style scoped>

.head{
    height: 290px;
  width: 1515px;
  border-bottom:3px solid rgb(80, 79, 79) ;
  box-shadow:-3px 5px 5px darkgray ;

  }
  .nav-head{
    min-width: 1515px;
    height: 40px;
    background: rgb(232, 232, 243);
    border-bottom:2px solid rgb(218, 218, 218) ;
    box-shadow:2px 5px 5px darkgray ;

  }
  .nav-head li{list-style: none; float: left;font-size: 5px;margin: 15px 105px;font-family: 'Courier New', Courier, monospace;}
  .nav-head span{color: rgb(248, 117, 9); margin-left:10px;margin-right: 10px;opacity: 0.9;}
  nav{ font-size: 5px;font-family: 'Courier New', monospace;
    float: right;margin-right:90px;margin-top:10px;position: relative;
    }
  nav .nav-link1{
   padding: 0px;
  line-height: 25px;
  text-decoration: none;
  color: rgb(46, 41, 33);

}
  nav .nav-link1:hover{
  text-decoration: underline;
  color: red;
}

#nav-line{
  height: 160px;
  width: 1515px;
}
#logo-left {
  width: 200px;
  float: left;
  margin: 35px 50px 0px -200px;
}
#nav-line span{float: left;color:gray;font-size: 96px;margin-left: -20px;opacity: 0.1;}
#tip1{float: left;position: relative;font-size:20px ;margin-top: 75px;color: rgb(63, 218, 63);font-family: Verdana, Geneva, Tahoma, sans-serif;}
#tip2{float: left;position: relative;font-size:20px ;margin-top: 30px; margin-left: -80px;color: rgb(63, 218, 63);font-family: Verdana, Geneva, Tahoma, sans-serif;}
#tip-line{position: absolute;float: left;width: 80px;border-bottom:2px dotted green;margin-top: 65px;margin-left: 405px;opacity: 0.4;font-family: Verdana, Geneva, Tahoma, sans-serif;}
#right {

  float: left;
  margin: 35px 50px 0px 200px;

}
#search{
  margin: 35px 0 0 110px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

  padding:0px
}
#search input[type="text"]{
  border:4px solid rgb(1, 116, 1);
  float:left;
  font-size: 20px;
  width:340px ;
  height: 39px;
  padding:0px;
  border-radius: 10px;
}
#search input[type="button"]{
  border:7px solid rgb(1, 116, 1);
  font-weight: 400;
  font-size: 25px;
  margin-left: -22px;
  margin-top: 0px;
  color: antiquewhite;
  background: rgb(1, 116, 1);
  height: 47px;
  width:100px ;
  cursor: pointer;
  padding:0px;border-radius:0px 10px 10px 0px;
}
p{float: left;margin-left: 120px;font-size: 5px; color: gray;}
p a{
  text-decoration: none;
  margin-left: 5px; color: gray;
}
p a:hover{color: green;text-decoration: underline;}

#nav-foot{
  padding: 2px;
}
 ul {
   list-style: none;
   margin-top:50px;
   margin-left:90px;
   padding: 1px;
  }
  ul li{
    float: left;
  }
  li span{margin-left:30px;margin-right: 30px; color: rgb(107, 93, 93);opacity: 0.2;}
   li .nav-link{
    text-decoration: none;
    color: black;
    font-weight: 700;
    font-size: 20px;
    padding: 2px;
  }
 ul li .nav-link:hover{
    color: chartreuse;
  }
</style>
